<template>
  <nav-bar>
    <template v-slot:default>完善购买信息</template>
  </nav-bar>
  <div class="detailList">
    <h3 class="title">{{ list[flag1].year }}年定期存款</h3>
    <div class="detail">
      <div>
        <h4 class="rate">年利率</h4>
        <h3>{{ list[flag1].rate }}%</h3>
      </div>
      <div>
        <h4 class="year">存期</h4>
        <h3>{{ list[flag1].year }}年</h3>
      </div>
      <div>
        <h4 class="money">存入金额</h4>
        <h3>{{ list[flag1].money }}元</h3>
      </div>
    </div>
  </div>
  <div class="detailList">
    <div class="line1">
      <p style="margin-right:auto;padding-top:2%">转出账户</p>
      <el-form-item>
        <el-select
          v-model="cardNumber"
          placeholder="请选择"
        >
          <el-option v-for="(item, index) in accountList"
          :key="index" :label="item" :value="index" @click="showSaving(index)" />
        </el-select>
      </el-form-item>
    </div>
    <div class="line2">
      <p style="margin-right:auto">可用余额</p>
      <p><big>￥</big>{{ saving }}</p>
    </div>
  </div>
  <el-button type="success" class="btn" @click="topay(id)">下一步</el-button>
</template>

<script>
import { useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import NavBar from "../../components/common/navbar/NavBar.vue";
import { ElMessage } from "element-plus";
import { allAccount } from "@/api/account";
export default {
  //   methods: {
  //     inputChange() { //输入框值改变
  //         this.pageIndex = this.pageIndex.replace(/[^\d]/g, '')
  //     }
  // },
  components: {
    NavBar,
  },

  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      cardNumber: "",
      id: 0,
      list: [],
      accountList: [],
      savingList: [],
      saving: 0,
      flag1: 0,
    });
    state.id = route.query.id;
    state.list = JSON.parse(localStorage.getItem('availableList'));
    const topay = (id) => {
      
      if (state.saving < state.list[state.flag1].money) {
        ElMessage({
          message: "余额不足，无法购买！",
          center: true,
          type: "error",
          offset: 100,
          showClose: true,
          duration: 5000,
        });
      } else {
        localStorage.setItem("payAccount", state.cardNumber);
      console.log(localStorage.getItem('payAccount'))
        router.push({ path: "/pay", query: { id } });
      }
    };

    const showSaving = (index) => {
      state.saving = state.savingList[index];
    };

    const initAccount = async () => {
      const res = await allAccount(localStorage.getItem("userID"));
      console.log(res);
      for (let item of res.data) {
        state.accountList.push(item.id);
        state.savingList.push(item.money);
      }
      state.cardNumber = state.accountList[0];
      state.saving=state.savingList[0];
      for(let it = 0; it < state.list.length; it++){
        if(state.list[it].id == state.id){
        state.flag1 = it
      }
    }
    };
    initAccount();

    return {
      ...toRefs(state),
      topay,
      showSaving,
    };
  },
};
</script>
<style lang="scss" scoped>
.title {
  text-align: left;
  margin: 10px;
}
.detailList {
  padding: 0 5%;
  padding-bottom: 5%;
  width: 90%;
  margin: 60px auto;
  border: 1px solid #efefef;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
}
.detail {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.money2 {
  border-left: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 1 solid black;
  line-height: 36px;
  font-size: 24px;
}
.line1 {
  padding-top: 5%;
  width: 100%;
  height: 40%;
  display: flex;
}
.line2 {
  width: 100%;
  height: 40%;
  display: flex;
}
.btn {
  width: 60%;
}
</style>
